<template>
	<view class="m-framework">
		<u-navbar :fixed="false" :title="navTitle" :autoBack="false" :safeAreaInsetTop="true" style="width: 100%;"
			:titleStyle="{ fontSize: '16px', fontWeight: 'bold' }">>
			<view class="LeftBox" slot="left">
				<!-- <slot name="navLeft"> -->
				<view class="x-f">
					<u-icon name="home-fill" color="#ffffff" size="28" @click="OpenPageRoute"></u-icon>

					<view class="x-f" style="font-size: 12px;color: #fff;margin-left: 10px;">
						<text v-if="EquipmentShow">
							{{MesBasicInfo.warehouse?MesBasicInfo.warehouse.EquipmentName:''}}</text>
						<text>【{{MesBasicInfo.UserName}}】</text>
						<text
							v-show='st_EquipmentShow'>【{{MesBasicInfo.className?MesBasicInfo.className.name:''}}】</text>
					</view>
				</view>
				<!-- </slot> -->
			</view>

			<view class="RightBox" slot="right">

				<view class="x-f RightBoxView">
					<view>
						当前时间：<text>{{currentTime }}</text>
					</view>

					<slot name="navRight">
						<u-button class="navRight_button" text="退出" color="#dbb56a" @click="out"></u-button>
					</slot>
				</view>
			</view>
		</u-navbar>

		<view class="workbench">

			<view class="x-f workbench_top">
				<view class="workbench_left">
					<u-tag style="width: fit-content;margin-right: 6px;" v-for="item in routeData" :text="item.Name"
						type="info" @click="ToLevel(item)"></u-tag>
				</view>
				<view v-if="EquipmentShow" class="workbench_right" v-show='ClockStatusTitle=="首页"'>
					<u-button v-show='st_EquipmentShow' type="primary"
						@click="changeClockStatus()">{{ClockStatusName}}</u-button>
					<u-button v-show='st_EquipmentShow' text="切换白夜班" color="#dbb56a" @click="changeClass"></u-button>
					<u-button text="切换机台" color="#dbb56a" @click="changeEquipment"></u-button>
				</view>


			</view>
			<u-popup :show="show" mode="bottom" @open="open" @close="close" @cancel='cancel'>
				<!-- <u-popup :show="show" mode="bottom" @close="close" @open="open"> -->
				<view class="u-popup_view">
					<u-button color='#d6a960' :text="item.EquipmentCode" @click='closetow(item)'
						v-for="(item,index) in getEquipmentList"></u-button>
				</view>
			</u-popup>

			<u-action-sheet :actions="classActions" :show="classShow" @select="classClick"></u-action-sheet>

			<u-toast ref="uToast"></u-toast>
			<slot name="workbench">
			</slot>
		</view>


		<view class="m-framework_main y-f">
			<slot name="content">
				<view class="y-f m-framework_main_box">
					<view class="y-f m-framework_main_box-border">
						<slot></slot>
					</view>
				</view>
			</slot>
		</view>


		<view class="m-framework_bottom x-f" :style="$utils.disposeSafeBottomFun()">
			<slot name="bottom">

				<u-navbar :fixed="false" :autoBack="false" :safeAreaInsetTop="false" :height="30"
					:bgColor="bgColor + '!important'" style="width: 100%;">

					<view class="m-framework_bottom-version bottomText" slot="left" v-show="version">
						<slot name="bottomLeft">
							<text>当前版本：</text>
							<text>{{version}}</text>
						</slot>
					</view>

					<view class="m-framework_bottom-company bottomText" slot="center">
						<slot name="bottomCenter">

						</slot>
					</view>

					<view class="m-framework_bottom-status bottomText x-c" slot="right">
						<slot name="bottomRight">
							<view class="x-f">
								<text>当前登录:</text>
								<text>【{{netWorkinfo.networkType}}】</text>
							</view>

							<view class="x-f" style="margin-left: 4px;">
								<text>当前网络:</text>
								<view style="width: 14px;height: 14px;border-radius: 9999px;"
									:style="{backgroundColor: netWorkinfo.isConnected ? '#63df5a' : '#ff3029'}"></view>
							</view>
						</slot>
					</view>
				</u-navbar>
			</slot>
		</view>



		<uni-popup ref="popup_route" class="MainPopup" type="left" background-color="rgba(0,0,0,0.4)"
			mask-background-color="rgba(0,0,0,0.1)" @close="closeRoutePopup">
			<view class="y-f routePopup" style="width: 30vw;height: 100vh;">
				<slot name="leftPopup">
					<u-button v-for="item in routeData" :text="item.Name" @click="ToLevel(item)"
						style="margin-bottom: 10px;width: 90%;"></u-button>
				</slot>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		name: "mc-framework",
		props: {
			navTitle: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#51d0d0'
			},

		},
		data() {
			return {
				ModuleID: null,
				st_EquipmentShow: false,
				EquipmentShow: true,
				version: null, // 本机版本号
				// networkType: null,
				// isConnected: true,
				MesBasicInfo: {}, // 控制台基础信息
				show: false,
				getEquipmentList: [],
				classShow: false,
				classActions: [{
						name: '白班',
						id: '1'
					},
					{
						name: '夜班',
						id: '2'
					}
				],
				ClockStatus: '',
				ClockStatusName: '上下班打卡',
				ClockStatusTitle: ''
			};
		},
		onShow() {

		},
		onLoad() {
			let that = this;

		},
		created() {
			let that = this;
			this.version = plus.runtime.version;
			// 获取网络连接方式
			// uni.getNetworkType({
			// 	success: function(res) {
			// 		that.networkType = res.networkType;

			// 		if (res.networkType != 'none') {
			// 			that.isConnected = true;
			// 		} else {
			// 			that.isConnected = false;
			// 		}
			// 	}
			// });


			this.ModuleID = this.$store.state.appConfigInfo.ActiveModule.ModuleID
			let MesBasicInfo
			if (this.$store.state.GuyueModule.MesBasicInfo && this.$store.state.GuyueModule
				.MesBasicInfo.UserName) {
				if (this.$store.state.appConfigInfo.ActiveModule.ModuleID != this.$store.state.GuyueModule.MesBasicInfo
					.ModuleID) {
					MesBasicInfo = that.addMesBasicInfo()
				} else {
					this.$store.state.UserInfo.UserName = this.$store.state.UserInfo.UserName ? this.$store.state.UserInfo
						.UserName : this.$store.state.UserInfo.UserName
					if (this.$store.state.UserInfo.UserName == this.$store.state.GuyueModule
						.MesBasicInfo.UserName) {
						MesBasicInfo = this.$store.state.GuyueModule.MesBasicInfo
					} else {
						MesBasicInfo = that.addMesBasicInfo()
					}
				}
			} else {
				MesBasicInfo = that.addMesBasicInfo()
			}
			this.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'MesBasicInfo',
				data: MesBasicInfo
			})

			this.MesBasicInfo = this.$store.state.GuyueModule.MesBasicInfo;
			this.ClockStatus = this.MesBasicInfo.Status.ClockStatus
			this.ClockStatusName = this.MesBasicInfo.Status.ClockStatusName
			this.ClockStatusTitle = this.MesBasicInfo.Status.ClockStatusTitle

			if (that.ModuleID == 6) {
				that.st_EquipmentShow = true
				if (this.MesBasicInfo.className.name) {
					this.classShow = false
				} else {
					this.classShow = true
				}
			} else if (that.ModuleID == 12) {
				that.EquipmentShow = true

				if (this.MesBasicInfo.warehouse.EquipmentName) {
					this.show = false
				} else {
					this.show = true
				}
			} else {
				that.EquipmentShow = false
			}

			this.$store.dispatch('GuyueModule/startUpdatingTime'); // 组件创建时启动时间更新 
			// uni.onNetworkStatusChange(this.onNetworkStatusChange);
		},
		computed: {
			currentTime() {
				return this.$store.state.GuyueModule.currentTimeString;
			},
			routeData() {
				return this.$store.state.GuyueModule.ModuleData_select;
			},
			netWorkinfo() {
				return this.$store.state.systemConfig.netWorkinfo;
			},
		},
		watch: {
netWorkinfo: {
				handler(nval, oval) {
					console.log(nval);
				},
				deep: true,
				immediate: true
			},
			routeData: {

				handler(nVal, oVal) {
					// console.log(nVal.length < oVal.length);

					if (nVal.length > oVal.length) { // 层级往下

					} else if (nVal.length < oVal.length) { // 层级往上


					} else { // 当前层级

					}

				}
			}

		},
		onUnload() {
			// 取消网络状态变化监听器  
			uni.offNetworkStatusChange(this.onNetworkStatusChange);
		},
		beforeDestroy() {
			this.$store.dispatch('GuyueModule/stopUpdatingTime'); // 组件销毁前停止时间更新  
		},
		methods: {
			changeClockStatus() {
				var that = this
				that.Request.request('confirmClock', {
					EmplName: this.$store.state.UserInfo.UserName,
					ClockStauts: that.ClockStatus,
					ShiftID: this.MesBasicInfo.className.id,
					EmplID: this.$store.state.UserInfo.EmplID
				}, (ret) => {
					console.log(ret.data);
					that.$refs.uToast.show({
						title: '保存',
						type: 'success',
						message: ret.data.ds[0].Column1
					})
					that.addClockStatus()
				})
			},
			addClockStatus() {
				var that = this
				var obj = {
					EmplID: this.$store.state.UserInfo.EmplID,
					ShiftID: this.MesBasicInfo.className.id
				}
				that.Request.request('judegClockStatus', obj, (ret) => {

					this.MesBasicInfo.Status.ClockStatus = ret.data.ds[0].ClockStatus
					if (ret.data.ds[0].ClockStatus == 0) {
						this.MesBasicInfo.Status.ClockStatusName = '上班打卡'
					} else {
						this.MesBasicInfo.Status.ClockStatusName = '下班打卡'
					}

					this.ClockStatus = this.MesBasicInfo.Status.ClockStatus
					this.ClockStatusName = this.MesBasicInfo.Status.ClockStatusName


				})
			},
			addMesBasicInfo() {
				var MesBasicInfo = {
					ModuleID: this.$store.state.appConfigInfo.ActiveModule.ModuleID,
					UserName: this.$store.state.UserInfo.UserName ? this.$store.state.UserInfo.UserName : this.$store
						.state.UserInfo.EmplName,
					openDate: new Date(),
					warehouse: {
						EquipmentID: 0,
						EquipmentName: '',
						EquipmentCode: '全部'
					},
					className: {},
					Status: {
						ClockStatusName: '上下班打卡',
						ClockStatus: 0,
						ClockStatusTitle: '首页'
					}
				}
				return MesBasicInfo

			},

			changeClass() {
				this.classShow = true
			},
			classClick(e) {
				this.MesBasicInfo.className = e
				this.classShow = false
				if (this.MesBasicInfo.warehouse.EquipmentName) {
					this.show = false
				} else {
					this.show = true
				}
				// this.addClockStatus()

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: this.$store.state.GuyueModule.MesBasicInfo
				})

			},
			out() {
				uni.$off('changeLevel');
				plus.screen.lockOrientation('portrait-primary');

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: [{
						length: 2,
						Name: '工作台',
						APPFunID: 0,
						nood: []
					}]
				});
				let routes = getCurrentPages(); //当前页面栈 

				uni.navigateBack({
					delta: routes.length
				})
			},
			OpenPageRoute() { // 点击navLeft图表
				// 打开弹层
				this.$refs.popup_route.open();

			},
			closeRoutePopup() {
				this.$refs.popup_route.close();

			},
			open() {
				var that = this
				// console.log('open');
				this.Request.request('getEquipment', {}, (ret) => {

					if (ret.status == 200) {
						that.getEquipmentList = ret.data.ds
					}
				})
			},
			cancel() {
				this.show = false
			},
			close() {
				this.show = false
			},
			closetow(item) {

				this.MesBasicInfo.warehouse = item

				this.show = false

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: this.$store.state.GuyueModule.MesBasicInfo
				})
				uni.$emit('changeEquipment');
				this.$emit('changeEquipment');
			},
			changeEquipment() {
				this.show = !this.show
			},
			ToLevel(data) {
				let initData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				let routes = getCurrentPages(); //当前页面栈
				if (routes.length == 2) {
					this.ClockStatusTitle = '首页'
				}
				if (initData[initData.length - 1].APPFunID != data.APPFunID) { // 点击上级数据

					this.clearAfterCondition(initData, (item) => item.APPFunID == data.APPFunID);
					// 存储到vuex
					this.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'ModuleData_select',
						data: initData
					})

					// 触发工作台数据变化
					uni.$emit('changeLevel', initData, data);

					this.$emit('changeLevel', initData, data);
				}

			},
			clearAfterCondition(data, condition) {
				// 遍历数组找到第一个满足条件的元素的索引  
				for (let i = 0; i < data.length; i++) {
					if (condition(data[i])) {
						// 如果找到，则截断数组  
						data.splice(i + 1); // 注意：splice 会修改原数组  
						break;
					}
				}
			},


			onNetworkStatusChange(res) {
				console.log(res);
				if (res.isConnected) {
					this.isConnected = true;
					// 当网络连接后的逻辑  
					uni.showToast({
						title: "网络已连接"
					});
				} else {
					this.isConnected = false;
					// 当网络断开后的逻辑  
					uni.showToast({
						title: "网络已断开"
					});
					// 可以在这里处理网络断开后的逻辑，如显示提示信息、停止网络请求等  
				}
			},

			dateFormat(date, fmt) {
				date = new Date(date)

				var a = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				var o = {
					'Y': date.getFullYear(),
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					'S': date.getMilliseconds(), // 毫秒
					'w': date.getDay(), // 周
					'W': a[date.getDay()], // 大写周
					'T': 'T'
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[
							k]).length)))
					}
				}
				return fmt
			}
		}
	}
</script>

<style lang="scss">
	.RightBoxView {
		font-size: 16px;
		color: #fff;
		display: flex;
		margin: 1% 0;
		box-sizing: border-box;
		justify-content: space-between;
		max-width: 700px;

		.navRight_button {
			width: fit-content;
			height: 35px;
		}
	}

	.m-framework {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.workbench_top {
			height: 40px;
			padding-left: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.workbench_left {
				display: flex;
				align-items: center;

			}

			.workbench_right {
				margin-right: 2%;
				width: fit-content;
				// width: 25%;
				display: flex;
				align-items: center;

				justify-content: flex-end;

				.u-button {
					height: 30px;
					margin: 0 3px;
					width: fit-content;
				}

			}
		}



		&_main {
			flex: 1;
			background-color: #e7e7e7;
			overflow: hidden;

			&_box {
				flex: 1;
				padding: 20px;
				width: 100%;
				height: 100%;

				&-border {
					border: 2px solid #fff;
					width: 100%;
					flex: 1;
					padding: 10px;
					height: 100%;
					overflow: hidden;
				}
			}

		}



		&_bottom {

			.bottomText {
				font-size: 12px;
				color: #fff;
			}

			&-company {
				text-align: center;
				flex: 1;
			}
		}
	}



	.routePopup {
		padding-top: var(--status-bar-height);
	}

	.u-popup_view {
		height: 50vh;
		padding: 1% 0;

		.u-button {
			display: inline-block;
			margin: 0 0.8%;
			width: 15%;
		}
	}
</style>